<template>
	<view class="container">
		<view class="header">
			<view class="search-bar">
				<text class="iconfont icon-search"></text>
				<input type="text" placeholder="搜索游戏或玩家" placeholder-class="placeholder" v-model="searchText" />
			</view>
			<view class="filter-tags">
				<text class="filter-tag" :class="{ active: activeFilter === 'all' }" @click="setFilter('all')">全部</text>
				<text class="filter-tag" :class="{ active: activeFilter === 'team' }" @click="setFilter('team')">组队</text>
				<text class="filter-tag" :class="{ active: activeFilter === 'chat' }" @click="setFilter('chat')">聊天</text>
			</view>
		</view>
		
		<scroll-view scroll-y class="team-list">
			<view class="team-item" v-for="team in filteredTeams" :key="team.id">
				<view class="team-header">
					<image :src="team.game.logo" class="game-logo" mode="aspectFill" />
					<view class="team-info">
						<text class="game-name">{{ team.game.name }}</text>
						<text class="team-type">{{ team.type }}</text>
					</view>
					<view class="team-status" :class="{ 'status-recruiting': team.isRecruiting }">
						{{ team.isRecruiting ? '招募中' : '已满员' }}
					</view>
				</view>
				
				<view class="team-content">
					<text class="team-title">{{ team.title }}</text>
					<text class="team-desc">{{ team.description }}</text>
				</view>
				
				<view class="members">
					<view class="member-avatars">
						<image v-for="(member, index) in team.members" 
							:key="index" 
							:src="member.avatar" 
							class="member-avatar"
							:style="{ zIndex: team.members.length - index }" />
						<view class="member-count" v-if="team.totalMembers > team.members.length">
							+{{ team.totalMembers - team.members.length }}
						</view>
					</view>
					<view class="join-btn" v-if="team.isRecruiting" @click="joinTeam(team.id)">
						加入队伍
					</view>
				</view>
				
				<view class="team-footer">
					<view class="team-tags">
						<text class="tag" v-for="(tag, index) in team.tags" :key="index">{{ tag }}</text>
					</view>
					<text class="create-time">{{ team.createTime }}</text>
				</view>
			</view>
		</scroll-view>
		
		<view class="create-team" @click="createTeam">
			<text class="iconfont icon-add"></text>
			<text>创建队伍</text>
		</view>
	</view>
</template>

<script>
import { games } from '../../../utils/gameData.js';

export default {
	data() {
		return {
			searchText: '',
			activeFilter: 'all',
			teams: []
		}
	},
	computed: {
		filteredTeams() {
			let filtered = this.teams;
			
			if (this.searchText) {
				const searchLower = this.searchText.toLowerCase();
				filtered = filtered.filter(team => 
					team.game.name.toLowerCase().includes(searchLower) ||
					team.title.toLowerCase().includes(searchLower)
				);
			}
			
			if (this.activeFilter !== 'all') {
				filtered = filtered.filter(team => team.type === 
					(this.activeFilter === 'team' ? '组队开黑' : '休闲聊天'));
			}
			
			return filtered;
		}
	},
	created() {
		this.generateMockData();
	},
	methods: {
		generateMockData() {
			// 生成10条模拟队伍数据
			this.teams = Array(10).fill().map((_, index) => {
				const game = games[Math.floor(Math.random() * games.length)];
				const isTeamType = Math.random() > 0.3;
				const memberCount = Math.floor(Math.random() * 3) + 2;
				
				return {
					id: `team_${index}`,
					game: {
						name: game.game_name,
						logo: game.game_logo
					},
					type: isTeamType ? '组队开黑' : '休闲聊天',
					title: isTeamType ? this.getRandomTeamTitle() : this.getRandomChatTitle(),
					description: isTeamType ? this.getRandomTeamDesc() : this.getRandomChatDesc(),
					isRecruiting: Math.random() > 0.3,
					members: Array(memberCount).fill().map(() => ({
						avatar: '/static/tiwen.gif'
					})),
					totalMembers: memberCount + (Math.floor(Math.random() * 3)),
					tags: this.getRandomTags(isTeamType),
					createTime: this.getRandomTime()
				};
			});
		},
		getRandomTeamTitle() {
			const titles = ['急需大佬带飞', '新手求带', '开黑冲分', '休闲娱乐', '竞技组队'];
			return titles[Math.floor(Math.random() * titles.length)];
		},
		getRandomChatTitle() {
			const titles = ['游戏交流', '找玩伴', '聊天唠嗑', '分享心得', '交朋友'];
			return titles[Math.floor(Math.random() * titles.length)];
		},
		getRandomTeamDesc() {
			const descs = [
				'求大佬带飞，萌新在线等',
				'冲分车队，来个大腿',
				'休闲玩玩，不急不躁',
				'组织日常队伍，长期有效'
			];
			return descs[Math.floor(Math.random() * descs.length)];
		},
		getRandomChatDesc() {
			const descs = [
				'交流游戏心得，分享游戏经验',
				'找志同道合的玩伴',
				'休闲聊天，互相学习',
				'分享游戏攻略和技巧'
			];
			return descs[Math.floor(Math.random() * descs.length)];
		},
		getRandomTags(isTeam) {
			const teamTags = ['语音', '等级不限', '萌新友好', '大神带飞', '日常固定'];
			const chatTags = ['经验分享', '休闲', '攻略交流', '社交', '趣味互动'];
			const tags = isTeam ? teamTags : chatTags;
			const count = Math.floor(Math.random() * 2) + 1;
			const result = [];
			
			while (result.length < count) {
				const tag = tags[Math.floor(Math.random() * tags.length)];
				if (!result.includes(tag)) {
					result.push(tag);
				}
			}
			
			return result;
		},
		getRandomTime() {
			const minutes = Math.floor(Math.random() * 59);
			return minutes === 0 ? '刚刚' : `${minutes}分钟前`;
		},
		setFilter(filter) {
			this.activeFilter = filter;
		},
		joinTeam(teamId) {
			uni.showModal({
				title: '加入队伍',
				content: '确定要加入该队伍吗？',
				success: (res) => {
					if (res.confirm) {
						uni.showToast({
							title: '已发送申请',
							icon: 'success'
						});
					}
				}
			});
		},
		createTeam() {
			uni.showToast({
				title: '创建队伍',
				icon: 'none'
			});
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding: 12px;
	position: relative;
	padding-bottom: 80px;
}

.header {
	background: #2D2D44;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
}

.search-bar {
	display: flex;
	align-items: center;
	background: #1E1E2E;
	border-radius: 20px;
	padding: 8px 15px;
	margin-bottom: 12px;
}

.search-bar input {
	flex: 1;
	margin-left: 8px;
	color: #9796B8;
	font-size: 14px;
}

.placeholder {
	color: #6E6C89;
}

.filter-tags {
	display: flex;
	gap: 10px;
}

.filter-tag {
	padding: 4px 12px;
	border-radius: 15px;
	font-size: 14px;
	color: #6E6C89;
	background: #1E1E2E;
}

.filter-tag.active {
	background: #9796B8;
	color: #1E1E2E;
}

.team-item {
	background: #2D2D44;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 12px;
}

.team-header {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.game-logo {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	margin-right: 10px;
}

.team-info {
	flex: 1;
}

.game-name {
	font-size: 16px;
	color: #9796B8;
	margin-bottom: 4px;
}

.team-type {
	font-size: 12px;
	color: #6E6C89;
}

.team-status {
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 10px;
	background: #1E1E2E;
	color: #6E6C89;
}

.status-recruiting {
	background: rgba(151, 150, 184, 0.2);
	color: #9796B8;
}

.team-content {
	margin-bottom: 12px;
}

.team-title {
	font-size: 15px;
	color: #9796B8;
	margin-bottom: 6px;
}

.team-desc {
	font-size: 13px;
	color: #6E6C89;
	line-height: 1.4;
}

.members {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.member-avatars {
	display: flex;
	align-items: center;
}

.member-avatar {
	width: 30px;
	height: 30px;
	border-radius: 15px;
	border: 2px solid #2D2D44;
	margin-left: -10px;
}

.member-avatar:first-child {
	margin-left: 0;
}

.member-count {
	margin-left: 5px;
	color: #6E6C89;
	font-size: 12px;
}

.join-btn {
	background: #9796B8;
	color: #1E1E2E;
	padding: 6px 15px;
	border-radius: 15px;
	font-size: 13px;
}

.team-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.team-tags {
	display: flex;
	gap: 8px;
}

.tag {
	font-size: 12px;
	color: #6E6C89;
	padding: 2px 8px;
	background: rgba(110, 108, 137, 0.1);
	border-radius: 10px;
}

.create-time {
	font-size: 12px;
	color: #6E6C89;
}

.create-team {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #9796B8;
	color: #1E1E2E;
	padding: 10px 25px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.iconfont {
	font-size: 16px;
	color: #6E6C89;
}

.create-team .iconfont {
	color: #1E1E2E;
}
</style> 